<template>
	<div class="shopcar">

		<div v-if="!nickName" class="shop-msg">
			<p class="login-jixu">亲,您需要登录才能继续访问</p>

			<login-page v-cloak></login-page>
		</div>

		<div v-else class="shopList">
			<h2 style="background: orange; text-align: center;color: #fff;line-height: 30px; height: 30px; font-size: 15px;">购物车<span  style="color: red;">({{shopLists.length}})</span></h2>
			<div class="shopList-cont" v-for="(item,index) in shopLists">

				<h4><i class="fa fa-shopping-bag"></i> {{item.author}}</h4>
				<div class="shop-xian">
					<div>
						<input type="checkbox" :checked="show" />
						<img :src="/taobao/+ item.shopImg" alt="" />
						<p class="shopName">{{item.title}}</p>
						<p class="jiage">¥{{item.price*item.buyCount}}</p>
					</div>
					<div class="buy">
						购买数量:
						<p class="buy-num">
							<button @click="editCart('minu',item)">-</button>
							<span>{{item.buyCount}}</span>
							<button @click="editCart('add',item)">+</button>
						</p>
					</div>
					<div class="caozuo">
						<button @click="shanchu(index)">删除</button>
						<button @click="shows">加入收藏</button>
					</div>
					<transition name="fade">
						<div class="shoucang" v-show="show1" @click="shows">
							<h3>加入收藏成功</h3>
						</div>
					</transition>
				</div>

			</div>

			<div class="checkAll">
				<div class="allInput">
					<input type="checkbox" @click="toggleCheckAll" :class="{'check':checkAllFlag}" />
					<span>全选</span>
				</div>

				<div class="price">
					<span>合计:¥{{totalPrice}}</span>
					<a href="#" :class="{'btn--dis':checkedCount==0}" @click="nowBuy">立即结算<span>({{shopLists.length}})</span></a>
				</div>
			</div>
			<div class="clear"></div>

		</div>

		<div v-else-if="this.shopLists.length=0">
			<h2>您的购物车饿瘪了,快去购物吧</h2>
		</div>

	</div>

</template>

<script>
	import $ from 'jquery'
	import axios from 'axios'
	import { mapState } from 'vuex'
	import LoginPage from '../components/LoginPage'
	export default {
		data() {
			return {
				shopLists: [],
				show: false,
				show1: false,
				items: []
			}
		},
		computed: {
			...mapState(['nickName']),
			checkAllFlag() {
				return this.checkedCount == this.shopLists.length;
			},
			totalPrice() {

				var money = 0;
				this.shopLists.forEach(function(item) {
					if(item.checked == '1') {
						money += (item.price) * (item.buyCount);
					}
				})
				return money;
			},
			checkedCount() {
				var i = 0;
				var that = this
				that.shopLists.forEach(function(item) {
					if(item.checked == '1') i++
				})
				return i;
			},
		},
		methods: {
			checkLogin() {
				var that = this;
				axios.get("/taobao/checkLogin").then(res => {
					var res = res.data;
					//				console.log(res);
					if(res.error == "0") {
						that.$store.commit("updateUserInfo", res.result);
					}
				})
			},
			shows() {
				this.show1 = !this.show1
			},
			shanchu(index) {
				var that = this;
				var id = this.shopLists[index]._id;
				console.log(id)
				axios.post('/taobao/remove', {
					id: id
				}).then(function(result) {
					if(result.data.error == 0) {
						alert('删除成功');
						location.reload();

					}
				})
			},
			nowBuy() {
				var that = this;
				axios.post('/taobao/jiesuan', {

				}).then(function(result) {
					//					console.log(1111212)
					var res = result.data;
					if(res.error == 0) {
						if(that.checkedCount > 0) {
							that.$router.push({
								path: "/PayMoney"
							});
						}
					}

				})

			},
			editCart(flag, item) {
				if(flag == 'add') {
					item.buyCount++;
				} else if(flag == 'minu') {
					if(item.buyCount <= 1) {
						return;
					}
					item.buyCount--;
				} else {
					item.checked = item.checked == "1" ? '0' : '1';
				}
				//				console.log(item._id)
				axios.post("/taobao/cartEdit", {
					id: item._id,
					buyCount: item.buyCount,
					checked: item.checked
				}).then((response) => {

				})
			},

			shopCart() {
				var that = this;
				axios.post('/taobao/gouwuche').then(function(result) {
					//				console.log(result);
					var res = result.data;
					that.shopLists = res.data;
					//					console.log(that.shopLists);	
				})
			},
			toggleCheckAll() {
				this.show = !this.show;
				var flag = !this.checkAllFlag;
				this.shopLists.forEach((item) => {

					item.checked = flag ? '1' : '0';

				})
			}
		},
		components: {
			LoginPage
		},
		mounted() {
			this.shopCart();
			this.checkLogin()
		}
	}
</script>

<style scoped="">
	.fade-enter-active,
	.fade-leave-active {
		transition: opacity .6s
	}
	
	.fade-enter,
	.fade-leave-to {
		opacity: 0
	}
	
	.shop-msg .login-jixu {
		height: 50px;
		line-height: 50px;
		position: fixed;
		background: #eee;
		width: 100%;
		text-align: center;
		display: block;
		font-size: 20px;
	}
	
	.shopcar {
		margin-bottom: 200px;
	}
	
	.shop-xian {
		height: 120px;
		background: cornsilk;
		border: solid 1px #eee;
		margin: 10px 0;
		position: relative;
		width: 100%;
	}
	
	.shopList-cont h4 {
		margin: 6px 0;
	}
	
	.shop-xian img {
		width: 80px;
		height: 80px;
		margin: 0 20px;
		margin-top: 10px;
		float: left;
	}
	
	.shop-xian input {
		position: absolute;
		top: 40px;
		left: 0;
	}
	
	.shopName {
		display: inline-block;
		float: left;
		margin-top: 15px;
	}
	
	.jiage {
		margin-top: 15px;
		margin-right: 20px;
		float: right;
		color: orangered;
		font-size: 17px;
	}
	
	.clear {
		clear: both;
	}
	
	.buy {
		position: absolute;
		left: 120px;
		top: 50px;
	}
	
	.buy-num {
		color: red;
		display: inline-block;
	}
	
	.buy-num span {
		margin: 0 2px;
	}
	
	.buy button {
		width: 20px;
		margin: 0 4px;
		border: none;
		background: orchid;
		color: #fff;
	}
	
	.caozuo {
		position: absolute;
		right: 15px;
		bottom: 0px;
		font-size: 15px;
	}
	
	.caozuo button {
		border: none;
		background: orangered;
		color: #fff;
		padding: 1px 2px;
	}
	
	.price {
		float: right;
	}
	
	.allInput {
		display: inline-block;
	}
	
	.price a {
		background: url(//gw.alicdn.com/tfscom/TB10.51HFXXXXXqXpXXYx6l2pXX-750-235.jpg_q90) no-repeat;
		;
		padding: 4px 8px;
		color: #fff;
	}
	
	.checkAll {
		position: fixed;
		bottom: 55px;
		width: 100%;
	}
	
	.shoucang {
		text-align: center;
		background: #fff;
		position: fixed;
		bottom: 51px;
		height: 150px;
		border: solid 1px #ccc;
		width: 100%;
		z-index: 1001;
	}
	
	.shoucang h3 {
		margin-top: 15px;
		color: orangered;
	}
</style>